<template>
	<view class="l-box" :id="'levelSpecCatBox_' + this.type +'_'+ this.level"
	     :style="'height: 303px'" v-show="list && list.length > 0">
		<view class="l-tit-box com-s-xScroll">
			<view class="tit-list"  v-for="(item,index) in titList" :key="index" @click="onClickTab(item,index)" v-show="item.hasSon">
				<view>{{item.title}}</view>
				<view :class="item.isFirstLevel  ? '' : item.checked ? 'line' : ''"></view>
			</view>
		</view>
		<!-- <view class="ls-box uni-list comm-list-scroll" :id="'levelSCItem_' + this.type +'_' + this.level"> -->
		<view class="ls-box uni-list comm-list" ref="contentList" id="contentList">
			<view class="list uni-list-cell uni-list-cell-pd" :id="item.id"
				v-for="(item,index) in list" 
				:key="index" :class="curIndex == index ? 'selected' : ''"  
				@click="onClick(item,index)">
				<view class="cat-radio-box" v-show="type==2">
					<radio :checked="item.checked"></radio>
				</view>
				<view class="tit-txt">{{item.title}}</view>
				<switch class="uni-list-cell-db" :checked="item.checked" @change="onChange($event,item,index)" v-show="type==1"></switch>
			</view>
		</view>
	</view>
</template>

<script>
	const H_NUM = 43; //每行高度
	const INTER_TIME = 15; //间隔时间
	import util from "@/js/util/Util.js";
	export default
	{
		props:["type","level","spec"],
		data(){
			this.scrollDom = null;
			return{
				curTabIdx:-1,
				titList:[],
				list:[],
				curIndex:-1,
				
				oldItem:null,
				oldIndex:-1,
			}
		},
		
		methods:{
			onClick(item,index)
			{
				
				console.log("onClick==data1==:",item,index);
				if(this.type == 1)
				{
					if(!this.spec)return;
					if(this.curIndex == index)return;
					this.curIndex = index;
					if(!item.checked)return;
					if(this.level == 2)return;
				}
				else if(this.type == 2)
				{
					// if(!item.checked)
					item.checked = !item.checked;
				}
				let data = {};
				data.data = item;
				data.level = this.level;
				console.log("onClick==data2==:",item,index);
				this.$emit("onClickItem",data);
			},
			
			setData(data)
			{
				this.titList = [];
				this.clearList();
				this.titList = data.titleList;
				this.list = data.list;
			},
			
			checkPos(arr)
			{
				if(arr)
				{
					let len = arr.length;
					for(let i = 0; i<len; i++)
					{
						let obj = arr[i];
						if(obj.checked)
							return i;
					}
				}
				return 0;
			},
			
			clearList()
			{
				this.list = [];
				this.curIndex = -1;
			},
			
			onClickTab(item,index)
			{
				if(this.type == 1)
				{
					if(this.level == 0)return;
					if(this.curTabIdx == index)return;
					this.curTabIdx = index;
					let data = {};
					data.data = item;
					data.level = this.level;
					this.$emit("onClickTab",data);
				}
			},
			
			onChange(event,item,index)
			{
				let data = {};
				this.curIndex = index;
				// if(this.type == 1)
				// {
				// 	item.checked = event.detail.value;
				// 	data.data = item;
				// 	data.level = this.level;
				// 	this.$emit('selectedData',data);
				// }
				// else if(this.type == 2)
				// {
				item.checked = event.detail.value;
				data.data = item;
				data.level = this.level;
				this.$emit('selectedData',data);
				// }
			},
			
				
			
			handlerScroll()
			{
				this.$nextTick(()=>
				{
					if(this.type == 1 && this.level == 0)
					{
						let flag = util.scrollData("#contentList");
						if(flag)
						{
							this.$emit("moreSpec");						
						}
					}
					
				});
			},
		},
		
		
		created()
		{
			
		},
		
		mounted()
		{
			if(document.querySelector("#contentList"))
				document.querySelector("#contentList").addEventListener("scroll",this.handlerScroll,true);
		},
	}
</script>

<style lang="scss">
	.l-box
	{
		border: 1px #ECECEC solid;
		margin-right: 10px;
		margin-top: 10px;
		overflow-y: auto;
		.l-tit-box
		{
			display: flex;
			text-align: center;
            height: 40px;
			width: 100%;
			border-bottom: 1px #ECECEC solid;
			// background-color: red;
			font-size: 13px;
			.tit-list
			{
				padding: 6px 6px;
				// width: 100%;
				width: auto;
				display: block;
				// overflow: hidden;
				text-overflow: ellipsis;
				-ms-text-overflow: ellipsis;
				white-space:nowrap;
				.line
				{
					border: 1px solid #3388ff;
				}
			}
			
		}
		
		.ls-box
		{
			width: 100%;
			height: 260px;
			font-size: 13px;
			line-height: 30px;
			color: #333;
			.list
			{
				padding: 6px;
				display: flex;
				position: relative;
				border-bottom: 1px #ECECEC solid;
				cursor: pointer;
				align-items: center;
				.tit-txt
				{
					width: calc(100% - 44px);
					height: 100%;
				}
				switch
				{
					height: 20px;
					position: absolute;
					right: 0px;
				}
				.cat-radio-box
				{
					width: 35px;
					height: 24px;
				}
			}
			// .list:first-child
			// {
			// 	color : #3388ff;
			// }
			.selected
			{
				color : #3388ff;
			}
		}
		
		
	}
</style>
